<template>
  <div style="margin-top:24px">
    <div>
      <List header="provide / inject" border>
        <ListItem>provide/ inject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。</ListItem>
        <ListItem>注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中回去数据</ListItem>
      </List>
    </div>
    <div style="height:24px"></div>
    <div>我是组件A,下面的值都是我定义的</div>
    <div style="height:24px"></div>
    <comB></comB>
  </div>
</template>
 
<script>
import comB from "./children";
export default {
  components: {
    comB
  },
  data() {
    return {
      value: this.for
    };
  },
  provide() {
    return {
      for: "我是父组件的值"
    };
  }
};
</script>